<div id="floor-config-view">
  <div class="page">
    <h3 class="text-center">{{info.apartmentName}}</h3>
    <div class="floor-picker-container">
      <div class="title">
        <div class="t1">楼栋</div>
        <div class="t2">楼层</div>
        <div class="t3">房间</div>
      </div>
      <div class="content">
        <div class="unit-list">
          <div class="unit-item" ng-repeat="item in unitList"
               ng-class="{'current':item.id==pick.unit}"
               ng-click="pickUnit(item)">
            {{item.name}}
            <span class="icon-right glyphicon glyphicon-edit" ng-click="editUnit(item)"></span>
          </div>
          <div class="unit-item new-item" ng-click="newUnit()">
            <span class="glyphicon glyphicon-plus"></span>新增楼栋
          </div>
        </div>
        <div class="floor-list">
          <div class="floor-item" ng-class="{'current':item.id==pick.floor}"
               ng-repeat="item in floorList" ng-click="pickFloor(item)">
            {{item.name}}
            <span class="icon-right glyphicon glyphicon-edit" ng-click="editFloor(item)"></span>
          </div>
          <div class="floor-item new-item" ng-click="newFloor()" ng-if="pick.unit">
            <span class="glyphicon glyphicon-plus"></span>新增楼层
          </div>
        </div>
        <div class="room-list">
          <div class="room-item" ng-class="{'current':item.id==pick.room}"
               ng-repeat="item in roomList" ng-click="pickRoom(item)">
            {{item.houseNo}}
            <span class="icon-right glyphicon glyphicon-edit" ng-click="editRoom(item)"></span>
          </div>
          <div class="room-item new-item" ng-click="newRoom()"  ng-if="pick.floor">
            <span class="glyphicon glyphicon-plus"></span>新增
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="form-container"  ng-if="pick.floorData && pick.floorData.thumb!='房态图'">
    <h4 style="height: 30px;">{{info.apartmentName+' / '+pick.unitData.name+' / '+pick.floorData.name}}
      <button style="margin-left: 20px;"
              class="btn btn-primary btn-sm"
              ng-click="enableFloorPlans()" ng-if="!pick.floorEditable">房间排版</button>
      <button style="margin-left: 20px;"
              class="btn btn-warning btn-sm"
              ng-click="disableFloorPlans()" ng-if="pick.floorEditable">退出排版</button>
    </h4>

  </div>
  <div class="floor-plan-container" ng-if="pick.floorData && pick.floorData.thumb!='房态图'">
    <div id="dynamic-room-{{item.id}}" class="dynamic-room draggable ui-widget-content" ng-style="roomStyle(item)"
         ng-class="{1:'rentable',2:'rented',4:'unavailable'}[item.status]"
         ng-repeat="item in roomList" ng-if="item.status!=0">
      <span class="room-name" ng-class="{'current':(pick.roomData && pick.roomData.id==item.id)}">{{item.houseNo}}</span>
    </div>
    <img ng-src="{{pick.floorData.thumb}}">
  </div>
</div>
